<!DOCTYPE html>
<html lang="en" style="height: 100%;">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="layui/css/layui.css" rel="stylesheet">
    <link href="fontawesome/font-awesome.min.css" rel="stylesheet">

    <style>
        .layui-tab-title {
            border-color: #5FB878;
        }
        .layui-tab-title .layui-this:after {
            border-top-color: #5FB878;
            border-left-color: #5FB878;
            border-right-color: #5FB878;
        }
        .layui-table td, .layui-table th {
            text-align: center;
            padding: 9px 5px;
        }


    </style>

</head>
<body style="height: 98%; ">


<div class="layui-tab "  style="padding: 0 25px 0 25px;height: 98%;">
    <ul class="layui-tab-title">
        <li class="layui-this">属性信息</li>
        <li onclick="line_chart_adjust()">实时监测</li>
        <li>设施照片</li>
        <li onclick="video_element_adjust()">视频信息</li>
    </ul>
    <div class="layui-tab-content" style="height: 88%;">
        <div class="layui-tab-item layui-show" style="height: 100%;overflow: scroll;overflow-x: hidden; overflow-y: auto; ">
            <table class="layui-table" style="margin: 0px;">
                <colgroup>
                    <col width="500">
                    <col >
                </colgroup>
                <thead>
                <tr style="background-color: #5FB878;color: white;">
                    <th colspan="2" style="height: 40px;text-align: center;font-size: 19px;">水库详细信息</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>水库名称</td>
                    <td>暂无信息</td>
                </tr>
                <tr>
                    <th>水库位置</th>
                    <td>暂无信息</td>
                </tr>
                <tr>
                    <td>建成日期</td>
                    <td>暂无信息</td>
                </tr>
                <tr>
                    <td>工程等别</td>
                    <td>暂无信息</td>
                </tr>
                <tr>
                    <td>集水面积</td>
                    <td>暂无信息</td>
                </tr>
                <tr>
                    <td>设计洪水位</td>
                    <td>暂无信息</td>
                </tr>
                <tr>
                    <td>调洪库容</td>
                    <td>暂无信息</td>
                </tr>
                <tr>
                    <td>正常蓄水位</td>
                    <td>暂无信息</td>
                </tr>
                <tr>
                    <td>兴利库容</td>
                    <td>暂无信息</td>
                </tr>
                <tr>
                    <td>死水位</td>
                    <td>暂无信息</td>
                </tr>
                <tr>
                    <td>死库容</td>
                    <td>暂无信息</td>
                </tr>
                <tr>
                    <td>管理单位</td>
                    <td>暂无信息</td>
                </tr>
                </tbody>
            </table>
        </div>
        <div class="layui-tab-item " style="height: 100%;">
            <div class="layui-inline"> <!-- 注意：这一层元素并不是必须的 -->
                开始时间：
                <input type="text" style="display: inline-block;width: 50%;" class="layui-input" id="start_date">
            </div>
            <div class="layui-inline"> <!-- 注意：这一层元素并不是必须的 -->
                结束时间：
                <input type="text" style="display: inline-block;width: 50%;" class="layui-input" id="end_date">
            </div>
            <div class="layui-inline" style="float: right;"> <!-- 注意：这一层元素并不是必须的 -->
                <button type="button" class="layui-btn layui-btn-radius layui-btn-normal" style="height: 35px;width: 80px;padding-left: 14px;line-height: normal;"><i class="layui-icon">&#xe615;</i>查询</button>
            </div>

            <div class="layui-container" style="margin: 5px 0 0 0;width: 100%;padding: 0;height: 95%;">
                <div class="layui-row" style="height: 100%;">
                    <div class="layui-col-md6" id="monitor_table" style="height: 100%;overflow: scroll;overflow-x: hidden; overflow-y: auto;">
                        <table class="layui-table" lay-even style="margin: 0px;">
                            <colgroup>
                                <col width="80">
                                <col width="120">
                                <col width="110">
                                <col width="130">
                                <col >
                            </colgroup>
                            <thead>
                            <tr style="background-color: #5FB878;color: white;">
                                <th colspan="5" style="height: 40px;text-align: center;font-size: 19px;">水库监测信息</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td>序号</td>
                                <td>时间</td>
                                <td>库水位(m)</td>
                                <td>蓄水量(百万m³)</td>
                                <td>超讯限</td>
                            </tr>
                            <tr>
                                <th>1</th>
                                <td>2021-12-01</td>
                                <td>163</td>
                                <td>215</td>
                                <td>否</td>
                            </tr>
                            <tr>
                                <th>1</th>
                                <td>2021-12-01</td>
                                <td>163</td>
                                <td>215</td>
                                <td>否</td>
                            </tr><tr>
                                <th>1</th>
                                <td>2021-12-01</td>
                                <td>163</td>
                                <td>215</td>
                                <td>否</td>
                            </tr>
                            <tr>
                                <th>1</th>
                                <td>2021-12-01</td>
                                <td>163</td>
                                <td>215</td>
                                <td>否</td>
                            </tr>
                            <tr>
                                <th>1</th>
                                <td>2021-12-01</td>
                                <td>163</td>
                                <td>215</td>
                                <td>否</td>
                            </tr><tr>
                                <th>1</th>
                                <td>2021-12-01</td>
                                <td>163</td>
                                <td>215</td>
                                <td>否</td>
                            </tr><tr>
                                <th>1</th>
                                <td>2021-12-01</td>
                                <td>163</td>
                                <td>215</td>
                                <td>否</td>
                            </tr>
                            <tr>
                                <th>1</th>
                                <td>2021-12-01</td>
                                <td>163</td>
                                <td>215</td>
                                <td>否</td>
                            </tr>
                            <tr>
                                <th>1</th>
                                <td>2021-12-01</td>
                                <td>163</td>
                                <td>215</td>
                                <td>否</td>
                            </tr>
                            <tr>
                                <th>1</th>
                                <td>2021-12-01</td>
                                <td>163</td>
                                <td>215</td>
                                <td>否</td>
                            </tr>
                            <tr>
                                <th>1</th>
                                <td>2021-12-01</td>
                                <td>163</td>
                                <td>215</td>
                                <td>否</td>
                            </tr>
                            <tr>
                                <th>1</th>
                                <td>2021-12-01</td>
                                <td>163</td>
                                <td>215</td>
                                <td>否</td>
                            </tr>
                            <tr>
                                <th>1</th>
                                <td>2021-12-01</td>
                                <td>163</td>
                                <td>215</td>
                                <td>否</td>
                            </tr><tr>
                                <th>1</th>
                                <td>2021-12-01</td>
                                <td>163</td>
                                <td>215</td>
                                <td>否</td>
                            </tr>
                            <tr>
                                <th>1</th>
                                <td>2021-12-01</td>
                                <td>163</td>
                                <td>215</td>
                                <td>否</td>
                            </tr>
                            <tr>
                                <th>1</th>
                                <td>2021-12-01</td>
                                <td>163</td>
                                <td>215</td>
                                <td>否</td>
                            </tr>
                            <tr>
                                <th>1</th>
                                <td>2021-12-01</td>
                                <td>163</td>
                                <td>215</td>
                                <td>否</td>
                            </tr>
                            <tr>
                                <th>1</th>
                                <td>2021-12-01</td>
                                <td>163</td>
                                <td>215</td>
                                <td>否</td>
                            </tr>







                            </tbody>
                        </table>
                    </div>
                    <div class="layui-col-md6" id="monitor_chart" style="height: 480.91px;width: 565px;margin-left: 1px;" >

                    </div>
                </div>
            </div>
        </div>
        <div class="layui-tab-item" style="height: 100%;">
            <div class="layui-carousel" id="element_photo" style="height: 100%;">
                <div carousel-item>
                    <div><img src="img/test_img/sk_1.jpeg" alt="水库" style="height: 100%;width: 100%;"></div>
                    <div><img src="img/test_img/sk_2.jpeg" alt="水库" style="height: 100%;width: 100%;"></div>
                    <div><img src="img/test_img/sk_3.jpeg" alt="水库" style="height: 100%;width: 100%;"></div>
                    <div><img src="img/test_img/sk_4.jpeg" alt="水库" style="height: 100%;width: 100%;"></div>
                    <div><img src="img/test_img/sk_5.jpeg" alt="水库" style="height: 100%;width: 100%;"></div>
                </div>
            </div>
        </div>
        <div class="layui-tab-item" style="height: 100%;">
            <div class="video" id="video" style="width: 1150px;height: 520px;"></div>
        </div>
    </div>
</div>



<script src="layui/layui.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/echarts.min.js"></script>
<script src="js/element_detail.js"></script>

</body>
</html>